<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>通用设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="role">
      <span>分体默认角色：{{ branchAdminRole.name }}</span>
      <el-popover
        placement="right"
        v-model="showRoleList"
        trigger="click">
        <el-table :data="roleData">
          <el-table-column
            width="150"
            property="name"
            label="权限名">
          </el-table-column>
          <el-table-column
            property="description"
            label="描述">
          </el-table-column>
          <el-table-column
            width="100"
            label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="chooseRole(scope.row.id)" :disabled="branchAdminRole.id === scope.row.id">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" size="small" slot="reference" @click="getRoleList">更换</el-button>
      </el-popover>
    </div>
    <div class="logistics">
      <h3>添加支持快递物流</h3>
      <el-form :model="addForm" label-width="60" :inline="true" size="small" :rules="formRule" ref="form">
        <el-form-item label="名称" prop="courierCompanyName">
          <el-input v-model="addForm.courierCompanyName"/>
        </el-form-item>
        <el-form-item label="代码" prop="courierCompanyCode">
          <el-input v-model="addForm.courierCompanyCode"/>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="addForm.type">
            <el-radio :label="1">快递</el-radio>
            <el-radio :label="2">物流</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addLogistics">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="logistics" size="mini">
        <el-table-column
          label="名称"
          prop="courierCompanyName">
        </el-table-column>
        <el-table-column
          label="代码"
          prop="courierCompanyCode">
        </el-table-column>
        <el-table-column
          label="类型"
          prop="status">
          <template slot-scope="scope">
            <el-tag>{{ type[scope.row.type] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 1" type="warning" plain size="small" @click="toUpAndDown(scope.row)">禁用</el-button>
            <el-button v-else plain size="small" type="primary" @click="toUpAndDown(scope.row)">启用</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="修改">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="toUpdateAll(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="修改信息" :visible.sync="showAllUpdate" width="500px">
        <el-form :model="updateForm" label-width="70" :rules="formRule" ref="updateForm">
          <el-form-item label="名称" prop="courierCompanyName">
            <el-input v-model="updateForm.courierCompanyName" placeholder="输入名称" style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="代码" prop="courierCompanyCode">
            <el-input v-model="updateForm.courierCompanyCode" placeholder="输入代码" style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="类型">
            <el-radio-group v-model="updateForm.type">
              <el-radio :label="1">快递</el-radio>
              <el-radio :label="2">物流</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="updateForm.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">启用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showAllUpdate = false">取 消</el-button>
          <el-button type="primary" @click="subAllUpdate">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'settings',
  data () {
    return {
      url: {
        setting: '/branch/system/setting',
        setRole: '/branch/set/default/admin/role',
        roleList: '/admin/manager/permission/role/list',
        allLogistics: '/logistics/query/info',
        addLogistics: '/logistics/add/Info',
        updateLog: '/logistics/modify/status'
      },
      branchAdminRole: {},
      roleData: [],
      showRoleList: false,

      // 所有物流快递
      logistics: [],
      type: [null, '快递', '物流'],

      addForm: {
        courierCompanyName: '',
        courierCompanyCode: '',
        type: 1,
        status: 1
      },
      formRule: {
        courierCompanyName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        courierCompanyCode: [
          { required: true, message: '请输入代码', trigger: 'blur' }
        ]
      },

      showAllUpdate: false,
      oldValue: '',
      updateForm: {
        courierCompanyName: '',
        courierCompanyCode: '',
        type: 1,
        status: 1
      },
      activeId: null
    }
  },
  methods: {
    setInfo () {
      this.$ajax.post(this.url.setting)
        .then(res => {
          if (res.data.success) {
            res.data.data.branchAdminRole && (this.branchAdminRole = res.data.data.branchAdminRole)
          }
        })
    },
    getRoleList () {
      this.$ajax.post(this.url.roleList)
        .then(res => {
          if (res.data.success) {
            this.roleData = res.data.data
          }
        })
    },
    chooseRole (id) {
      this.$ajax.post(this.url.setRole, id)
        .then(res => {
          if (res.data.success) {
            this.$message.success('设置成功')
            this.setInfo()
          }
          this.showRoleList = false
        })
    },
    getAllLogistics () {
      this.$ajax.get(this.url.allLogistics)
        .then(res => {
          if (res.data.success) {
            this.logistics = res.data.data
          }
        })
    },
    addLogistics () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$ajax.post(this.url.addLogistics, this.addForm)
            .then(res => {
              if (res.data.success) {
                this.$message.success('添加成功')
                this.getAllLogistics()
                this.$refs.form.resetFields()
              }
            })
        }
      })
    },

    toUpAndDown (row) {
      /*
      * 1、启用禁用修改方法
      * 2、参数status代表当前状态
      * 3、status=1需要禁用，status=0需要启用
      * */
      let params = {
        id: row.id,
        status: row.status ? 0 : 1
      }
      this.$ajax.post(this.url.updateLog, params)
        .then(res => {
          if (res.data.success) {
            this.getAllLogistics()
            this.$message.success('修改成功')
          }
        })
    },
    toUpdateAll (row) {
      /*
      * 1、存储初始数据
      * 2、填充数据
      * 3、显示浮层
      * */
      this.activeId = row.id
      for (let i in this.updateForm) {
        this.updateForm[i] = row[i]
      }
      this.oldValue = JSON.stringify(this.updateForm)
      this.showAllUpdate = true
    },
    subAllUpdate () {
      if (this.oldValue !== JSON.stringify(this.updateForm)) {
        this.$refs.updateForm.validate((valid) => {
          if (valid) {
            let oldValue = JSON.parse(this.oldValue)
            let params = {}
            for (let i in this.updateForm) {
              if (this.updateForm[i] !== oldValue[i]) {
                params[i] = this.updateForm[i]
              }
            }
            params.id = this.activeId
            this.$ajax.post(this.url.updateLog, params)
              .then(res => {
                if (res.data.success) {
                  this.getAllLogistics()
                  this.showAllUpdate = false
                  this.$message.success('修改成功')
                }
              })
          }
        })
      }
    }
  },
  created () {
    this.setInfo()
    this.getAllLogistics()
  }
}
</script>

<style scoped>
  .logistics{
    margin-top: 16px;
    border-top: 1px solid #dddee1;
    padding-top: 10px;
  }
</style>
